AWSの次世代JavaScriptライブラリ「AWS Amplify」の概要とReactアプリに導入する手順 #serverless #adventcalendar

Serverless Advent Calendar 2017

#AWS Amplify

#JavaScript

#サーバーレス

#React

#AWSツールとSDK

諏訪悠紀

2017.12.13

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

AWS Amplifyとは？

本記事はServerless Advent Calendar 2017の13日目の記事です。よろしくお願いします。

AWS Amplifyは、2017年11月に公開されたAWSを利用するWebアプリケーション向けのJavaScriptライブラリです。サインアップやサインイン、MFA、追跡またはメトリクスの分析、コンテンツ管理、またはサーバーレスAPI統合などの実装が容易にできるように設計されています。

AWS Amplify は、クラウドサービスをスケーラブルかつ保護された方法で使用して一般的なアクションを実行するクライアント開発者に、宣言型インターフェイスを提供するように設計されています。これらの新機能を使用して、開発者は JavaScript アプリケーションを作成して一般的な抽象化を使用したベストプラクティスをプログラムによって適用し、最終的に開発サイクルを高速化できます。AWS Amplify のリリースに伴い、包括的な CLI エクスペリエンスもリリースされました。これは AWS Mobile Hub に完全に統合されています。この CLI エクスペリエンスはゼロからアプリケーションを構築する開発者、または AWS クラウドの機能を使用して既存のプロジェクトを強化する開発者向けに設計されています。

これまでCognitoを利用したWebアプリケーションを開発する場合、複数のライブラリ（Amazon Cognito Identity SDK for JavaScript+AWS SDK for JavaScript）を読む必要があり少し冗長な面がありましたが、AWS Amplifyを使うとその複雑さから解放されます。

また、AWS re:Invent 2017で発表された新サービス「AWS AppSync」でも利用できることがセッションで紹介されていました。AWSを利用するWebアプリケーション開発において、AWS Amplifyが今後活用されていくことが予想できます。

Using AWS Amplify with AWS AppSync. #amplify #reInvent pic.twitter.com/CuQHiZMzLR

— AWS re:Invent (@AWSreInvent) 2017年11月30日

ということで本記事では、AWS Amplifyについてまとめつつ、React製のサンプルアプリを作ってみたいと思います！

AWS Amplifyでできること

AWS Amplifyのライブラリのモジュールは、機能のカテゴリごとに分類されています。

Auth

Amazon Cognito利用時に必要なAWS署名バージョン4プロトコル（AWS Signature Version 4 Signing）に準拠した認証処理
一般的なサインインに必要な処理（サインイン、サインアップ、パスワード忘れ）
MFA

Analytics

Amazon Pinpointへのトラッキングデータの送信
カスタム属性値、カスタムメトリクスの追加
ワンライナーによる実装から利用可能

API

Amazon API Gatewayへのリクエスト処理
AWS署名バージョン4プロトコル（AWS Signature Version 4 Signing）を用いたRESTful APIへのリクエスト処理

Storage

Amazon S3に対するアップロード、ダウンロード、一覧のシンプルな呼び出し方式の提供
ユーザーベースのPublic/Privateコンテンツのグルーピング

Caching

WebアプリおよびReact Native製アプリ向けのLRUキャッシュ機構

i18n and Logging

国際化、多言語化への対応
デバッグ機能およびログ機能の提供

Reactアプリを作ってみる

それでは、AWS Amplifyを使ったReact製のWebアプリケーションを作ってみましょう。今回はミニマムな構成として、サインアップやサインインといった機能のみ実装します。

検証環境

Node.js : 9.2.1
yarn : 1.3.2
aws-amplify : 0.1.20
aws-amplify-react : 0.1.23
react : 16.2.0

Cognito User Poolsの準備

Cognito User Poolsのセットアップが完了しているものとし、本記事からは割愛します。Cognito User PoolとClientが必要になります。次の記事を参考に構築してください。

Angular+Cognitoで作るログインページ– ClassmethodサーバーレスAdvent Calendar 2017 #serverless #adventcalendar

Webアプリケーションの実装

まずcreate-react-appを使ってReactアプリの雛形を作ります。

$ yarn global add create-react-app
$ create-react-app amplify-react-sample
$ cd amplify-react-sample

初めてcreate-react-appを使う方は、この時点で yarn start を実行し、動作確認をしてみると安心でしょう。

次に、AmplifyライブラリとAmplifyのReact拡張ライブラリをインストールします。

$ yarn add aws-amplify aws-amplify-react

次に src/App.js を書き換えます。

import React, { Component } from 'react';
import Amplify from 'aws-amplify';
import { Authenticator } from 'aws-amplify-react';

Amplify.configure({
  Auth: {
    region: 'ap-northeast-1', // REQUIRED - Amazon Cognito Region
    userPoolId: 'ap-northeast-1_XXXXXXXXX', //OPTIONAL - Amazon Cognito User Pool ID
    userPoolWebClientId: 'XXXXXXXXXXXXXXXX', //OPTIONAL - Amazon Cognito Web Client ID
  }
});

class AppWithAuth extends Component {
  render() {
    return <Authenticator />
  }
}

export default AppWithAuth;

aws-amplify-react は、UIを含めたロジックがReactコンポーネント単位で予め実装されている超便利なライブラリです。インポートしている Authenticator は、サインインやサインアップといったユーザー認証周りの処理を画面遷移も含めて丸ごと詰め込まれたReactコンポーネントです。内部的には分離はされているので、カスタマイズが必要な場合はより細分化されたReactコンポーネント（SignIn や SignUp など）を利用すれば良いというわけです。楽チンですね。

ということで、以上で実装は終わりです。

動かしてみる

yarn start を実行し、動作確認をしてみましょう。

$ yarn start

サインイン（ログイン）ページが表示されます。まずは新規登録したいので「Sign Up」をクリックします。

ユーザー名とパスワード、メールアドレスを入力します。

メールアドレス宛に承認コードが送られます。

画面上では承認コード入力画面が表示されるので、メール本文に記載されている承認コードを入力します。

サインインページに戻るので、先ほど新規登録時に設定したユーザー名とパスワードを入力します。

ログインできました！

おまけ : テーマの変更

aws-amplify-react は、UIのテーマを簡単に編集できる機能も兼ね備えています。テーマは独自の仕様になるため、準拠した実装を行う、またはライブラリを利用することで簡単に見た目を変えることができます。例としてrichardzcode/a-theme-reactを使ってみましょう。

まずはライブラリをインストールします。

$ yarn add a-theme-react

App.js を次のように書き換えます。

import React, { Component } from 'react';
import Amplify from 'aws-amplify';
import { Authenticator } from 'aws-amplify-react';
import { Bootstrap } from 'a-theme-react';

// Amplify.configure を割愛

class AppWithAuth extends Component {
  render() {
    return <Authenticator theme={Bootstrap} />
  }
}

export default AppWithAuth;

これだけで、見た目が変わります。

AWS AmplifyはこれからのAWSを利用したWebアプリのデファクトスタンダードとなる

Cognito User Poolsを用いたWebアプリケーションを作る場合、今後はAWS Amplifyを使う方式がデファクトスタンダードとなるでしょう。簡単に導入できるので、これからWebアプリケーションを開発する場合も、すでにAmazon Cognito Identity SDK for JavaScriptで実装している場合も、ぜひ検討してみてください！